<template>
  <div @tap="toDetail">
    <div class="content">
      <swiper indicator-dots indicator-color="pink" indicator-active-color="green"
              autoplay=aautoplay
              circular=ccircular>
        <swiper-item><img src="http://p1.music.126.net/ri7DIybLn_hbpv3JzrAzmg==/109951164189785999.jpg" alt="" /></swiper-item>
        <swiper-item><img src="http://p1.music.126.net/m0KkKA3TGQajIlEoip6qrQ==/109951164188718192.jpg" alt=""/></swiper-item>
        <swiper-item><img src="http://p1.music.126.net/-mEJQ8KVkwQTKJ5ECbhsiQ==/109951164188738175.jpg" alt=""/></swiper-item>

      </swiper>
    </div>
    <div>
      <ListTemp v-for="(item,index) in listTmp" :key="index" :item="item" :index="index"/>
    </div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import ListTemp from '../list-template/list-template'
  export default {
    data(){
      return{
        aautoplay:true,
        ccircular:true
      }
    },
    components:{
      ListTemp
    },
    beforeMount(){
    //分发action修改状态
      this.$store.dispatch('getList')
    },
    computed:{
      //映射状态到本组件
      ...mapState(['listTmp'])
    },
    methods:{

    }
  }
</script>
<style scoped>
  .content{
    height: 350rpx;
    width: 100%;

  }
  .content swiper{
    height: 100%;
    width:100%;

  }
  .content swiper img{
    height: 100%;
    width:100%;
    border-radius: 15rpx;
  }
</style>
